<template>
<div class="article-list">
    <Form :model="formItem" ref="formItem" :inline="true" action="javascript:void(0)">
		<FormItem>
			<TreeSelect clearable v-model="formItem.cateid" :data="cateSelect" v-width="200"></TreeSelect>
		</FormItem>
		<FormItem>
			<DatePicker :model-value="formItem.datetime" type="datetimerange" format="yyyy-MM-dd" style="width: 260px" placeholder="开始时间 - 结束时间" @on-change="dateChange($event)"></DatePicker>
		</FormItem>
		<FormItem>
			<Input v-model="formItem.key" placeholder="输入关键字查询..."></Input>
		</FormItem>
		<FormItem>
			<Button type="primary" @click="renderTable()">筛选</Button>
		</FormItem>
	</Form>
	<div class="action-btn">
		<Button size="small" @click="removeMultiple()" style="margin-right: 8px" type="error">批量删除</Button>
		<Button size="small" @click="showCreate()" type="success">添加文章</Button>
	</div>
	<Table border :columns="tableColumn" ref="selection" @on-selection-change="changeData($event)" :data="dataList" :loading="dataLoading">
		<template #push="{ row }">
			<Tag v-if="row.pushFlag" color="cyan">是</Tag>
			<Tag v-if="!row.pushFlag" color="orange">否</Tag>
		</template>
		<template #hits="{ row }">
			<Tag color="geekblue">{{ row.hits }}</Tag>
		</template>
		<template #action="{ row }">
            <Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">编辑</Button>
            <Button type="error" size="small" @click="removeDetail(row.id)">删除</Button>
        </template>
	</Table>
	<!-- 分页 -->
	<div class="table-page">
		<Page size="small" ref="listPage" :total="pages.total" :model-value="pages.current" :page-size="pages.size" show-elevator show-total @on-change="changePage"></Page>
	</div>
</div>
</template>

<script>
export default {
	name: 'ArticleList',
	data() {
		return {
			dataLoading: true,
			cateSelect: [],
			formItem: {
				'key': '',
				'cateid': 0,
				'datetime': ['',''],
				'startAt':'',
				'endAt':''
			},
			pages: {
				current: 1,
				total: 0,
				size: 10
			},
			tableColumn: [
				{
					type: 'selection',
					width: 60,
					align: 'center',
				},
				{
					title: 'Id',
					key: 'id',
					width: 70,
				},
				{
					title: '标题',
					minWidth: 300,
					key: 'title'
				},
				{
					title: '栏目',
					width: 150,
					key: 'cateName'
				},
				{
					title: '推荐',
					width: 70,
					slot: 'push'
				},
				{
					title: '点击',
					width: 100,
					slot: 'hits'
				},
				{
					title: '操作',
					slot: 'action',
					width: 130,
					align: 'left',
				}
			],
			dataList: [],
			selectData: [],
		}
	},
	watch:{
		$route:{
			immediate: true,
			handler(newval,oldval){
				// console.log('newval',newval)
				this.pages.current = newval.query.page != undefined ? parseInt(newval.query.page) : 1;
				this.formItem.key = newval.query.key != undefined ? newval.query.key : '';
				this.formItem.cateid = newval.query.cateid != undefined && newval.query.cateid != '' ? parseInt(newval.query.cateid) : 0;
				this.formItem.startAt = newval.query.starttime != undefined ? newval.query.starttime : '';
				this.formItem.endAt = newval.query.endtime != undefined ? newval.query.endtime : '';
				this.getTableList();
			}
		}
	},
	created() {
		this.$api.cate.select().then(res => {
			if (res.code == 200) {
				this.cateSelect = res.result;
			}
		});
	},
	methods: {
		dateChange(date){
			this.formItem.datetime[0] = date[0] != '' ? date[0] + ' 00:00:00' : '';
			this.formItem.datetime[1] = date[1] != '' ? date[1] + ' 23:59:59' : '';
			this.formItem.startAt = this.formItem.datetime[0];
			this.formItem.endAt = this.formItem.datetime[1];
		},
		getTableList() {
			var params = { page: this.pages.current, size: this.pages.size, 'key': this.formItem.key, 'cateid': this.formItem.cateid, 'startAt': this.formItem.startAt, 'endAt': this.formItem.endAt };
			this.dataLoading = true;
			this.$api.article.list(params).then(res => {
                this.dataList = res.result.list;
                this.pages.total = res.result.total
			}).finally(e=>{
				this.dataLoading = false;
            });
		},
		changePage() {
			this.pages.current = this.$refs['listPage'].currentPage;
			this.getTableList();
		},
		renderTable() {
			this.pages.current = 1;
			this.getTableList();
        },
		showCreate() {
			this.$router.push({
				path:'/article/create'
			});
		},
		showEdit(id) {
			this.$router.push({
				path:'/article/update',
				query:{
					id:id
				}
			});
		},
		removeDetail(id) {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行...</p>',
				onOk: () => {
					this.$api.article.remove({ detailIds: id }).then(res => {
                        this.getTableList();
					});
				}
			});
		},
		changeData(index) {
			this.selectData = index
		},
		removeMultiple() {
			// 弹出确认框
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行...</p>',
				onOk: () => {
					var ids = [];
					this.selectData.forEach((item) => {
						ids.push(item.id);
					})
					this.$api.article.remove({ detailIds: ids }).then(res => {
                        this.getTableList();
					});
				}
			});
		},
	}
}
</script>
